<template>
    <el-container>
        <el-header class="header-tabs">
            <el-tabs type="card" v-model="groupId" @tab-change="tabChange">
                <el-tab-pane label="维修时长" name="1"></el-tab-pane>
                <el-tab-pane label="维修次数" name="2"></el-tab-pane>
                <el-tab-pane label="故障原因" name="3"></el-tab-pane>
            </el-tabs>
        </el-header>
        <el-header>
            <div class="right-panel-search">
                <div class="search-input" v-if="groupId!=3">设备</div>
                <el-input v-if="groupId!=3" v-model="search.device_name" placeholder="请输入设备" clearable @click="openDev" readonly />
                <div class="search-input" v-if="groupId==3">故障类型</div>
                <el-input v-if="groupId==3" v-model="search.keywords" placeholder="请输入故障类型" clearable />
                <el-date-picker v-model="search.year" :format="yyyy" type="year" placeholder="请选择年份" />
                <el-button type="primary" icon="el-icon-search" @click="upsearch">搜索</el-button>
            </div>
            <el-tabs type="card" v-model="search.sta" v-if="groupId==1" @tab-change="firstChange">
                <el-tab-pane label="总时长" name="1"></el-tab-pane>
                <el-tab-pane label="等待时长" name="2"></el-tab-pane>
                <el-tab-pane label="实际维修时长" name="3"></el-tab-pane>
            </el-tabs>
        </el-header>
        <el-main class="nopadding" v-if="groupId==1">
            <el-card shadow="never" class="data_card_mid_right" >
                <template #header>
                    <div class="card-header">
                        <span>总时长(Top10)</span>
                    </div>
                </template>
                <scEcharts height="300px" :option="option"></scEcharts>
            </el-card>
            <scTable ref="table" :data="table.item" stripe border height="420">
                <el-table-column type="selection"  align="center" width="50"></el-table-column>
                <el-table-column label="设备名称" prop="device_title" align="center"></el-table-column>
                <el-table-column label="合计" prop="total.all" align="center"></el-table-column>
                <el-table-column v-for="(item,index) in table.table" :key="index" :label="item.field" align="center">
                    <template #default="{row}">
                        <div v-if="search.sta==1">{{row[item.field].all}}</div>
                        <div v-if="search.sta==2">{{row[item.field].wait}}</div>
                        <div v-if="search.sta==3">{{row[item.field].actual}}</div>
                    </template>
                </el-table-column>
            </scTable>
        </el-main>
        <el-main class="nopadding" v-if="groupId==2">
            <el-card shadow="never" class="data_card_mid_right" >
                <template #header>
                    <div class="card-header">
                        <span>维修次数(Top10)</span>
                    </div>
                </template>
                <scEcharts height="300px" :option="options"></scEcharts>
            </el-card>
            <scTable ref="table" :data="table.item" stripe border height="420">
                <el-table-column type="selection"  align="center" width="50"></el-table-column>
                <el-table-column label="设备名称" prop="device_title" align="center"></el-table-column>
                <el-table-column label="合计" prop="total.all" align="center"></el-table-column>
                <el-table-column v-for="(item,index) in table.table" :key="index" :label="item.field" align="center">
                    <template #default="{row}">
                        <div v-if="search.sta==1">{{row[item.field].all}}</div>
                        <div v-if="search.sta==2">{{row[item.field].wait}}</div>
                        <div v-if="search.sta==3">{{row[item.field].actual}}</div>
                    </template>
                </el-table-column>
            </scTable>
        </el-main>
        <el-main class="nopadding" v-if="groupId==3">
            <el-card shadow="never" class="data_card_mid_right" >
                <template #header>
                    <div class="card-header">
                        <span>问题类型(Top10)</span>
                    </div>
                </template>
                <scEcharts height="300px" :option="options"></scEcharts>
            </el-card>
            <scTable ref="table" :data="table.item" stripe border height="420">
                <el-table-column type="selection"  align="center" width="50"></el-table-column>
                <el-table-column label="问题类型" prop="device_title" align="center"></el-table-column>
                <el-table-column label="合计" prop="total.all" align="center"></el-table-column>
                <el-table-column v-for="(item,index) in table.table" :key="index" :label="item.field" align="center">
                    <template #default="{row}">
                        <div v-if="search.sta==1">{{row[item.field].all}}</div>
                        <div v-if="search.sta==2">{{row[item.field].wait}}</div>
                        <div v-if="search.sta==3">{{row[item.field].actual}}</div>
                    </template>
                </el-table-column>
            </scTable>
        </el-main>
    </el-container>
    <device-list v-if="dialog.save" ref="saveDialog" @success="handleSuccess" @closed="dialog.save = false" draggable></device-list>
</template>

<script>
import scEcharts from "@/components/scEcharts";
import deviceList from '@/views/device/deviceList.vue'
    export default {
        components: {scEcharts, deviceList},
        data() {
            return {
                apiObj:this.$API.jiankong.deviceTable,//保养记录
                option: {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                        type: 'shadow'
                        }
                    },
                    legend: {},
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: [],
                            axisLabel: {
                                align: 'left' // x轴标签左对齐
                            }
                        }
                    ],
                    yAxis: [
                        {
                        type: 'value'
                        }
                    ],
                    series: [
                        {
                            name: '等待时长',
                            type: 'bar',
                            stack: 'Search Engine',
                            emphasis: {
                                focus: 'series'
                            },
                            data: [],
                        },
                        {
                            name: '实际维修时长',
                            type: 'bar',
                            stack: 'Search Engine',
                            emphasis: {
                                focus: 'series'
                            },
                            data: [],
                        }
                    ]
                },
                options: {
                    grid: {
                    top: "80px",
                    },
                    tooltip: {
                    trigger: "axis",
                    },
                    xAxis: {
                        type: "category",
                        data: [],
                    },
                    yAxis: {
                    type: "value",
                    },
                    series: [
                        {
                            data: [],
                            type: "bar",
                            barWidth: "15px",
                        },
                    ],
                },
                search:{
                    device_name:null,
                    device_id:null,
                    sta:"1",
                    year:new Date()
                },
                dialog:{
                    save:false
                },
                groupId:"1",
                table:{},
            }
        },
        mounted () {
            this.upsearch()
        },
        methods: {
            // 选择设备
            openDev(){
                this.dialog.save = true
                this.$nextTick(() => {
                    this.$refs.saveDialog.open('add')
                })
            },
            handleSuccess(data) {
                this.search.device_name = data[0].title
                this.search.device_id = data[0].id
                this.upsearch()
            },
            // 查询
            async upsearch(){
                var yearData = this.search.year;
                var currentYear = yearData.getFullYear();
                let query = {
                    type:this.groupId,
                    device_id:this.search.device_id,
                    year:currentYear,
                    sta: this.groupId==1?this.search.sta:null
                }
                var res = await this.$API.jiankong.deviceMain.post(query);
                this.table = res.data
                let title = []
                let wait = []
                let actual = []
                let all = []
                res.data.top.map(item=>{
                    title.push(item.device_title)
                    wait.push(item.value.wait)
                    actual.push(item.value.actual)
                    all.push(item.value.all)
                })
                this.option.xAxis[0].data = title
                this.options.xAxis.data = title
                this.options.series[0].data = all
                this.options.series[0].barWidth = 40
                if(this.search.sta==1){
                    this.option.series[0].data = wait
                    this.option.series[1].data = actual
                    this.option.series[0].barWidth = 40
                }else if(this.search.sta==2){
                    this.option.series[0].data = all
                    this.option.series[1].data = []
                    this.option.series[0].barWidth = 40
                }else{
                    this.option.series[0].data = []
                    this.option.series[1].data = all
                    this.option.series[1].barWidth = 40
                }
            },
            firstChange(){
                this.upsearch()
                // if(this.search.device_id==null){
                //     this.$message.error("请选择设备")
                // }else{
                //     this.upsearch()
                // }
            },
            tabChange(){
                this.upsearch()
                // if(this.search.device_id==null){
                //     this.$message.error("请选择设备")
                // }else{
                //     this.upsearch()
                // }
            },
        },
    }
</script>

<style lang="scss" scoped>
</style>